<template>
<q-dialog class="progress-result-dialog" persistent v-model="show">
  <q-card style="min-width: 1000px">
    <q-card-section class="dialog-title bg-primary">
      <div class="text-center text-white">传输记录
        <q-btn flat dense round color="primary" icon="iconfont icontubiao-67"
               @click="hideDialog()" class="fr text-white" style="font-size: 10px;margin-top: 8px"/>
      </div>
    </q-card-section>
    <q-card-section class="dialog-content">
      <ul class="left full-height">
        <li :class="{'active': tab==='doing'}" @click="changeTab('doing')">
          <q-icon name="iconfont icontubiao-66" class="icon"></q-icon>
          <div class="text">正在传输</div>
        </li>
        <li :class="{'active': tab==='fail'}" @click="changeTab('fail')">
          <q-icon name="iconfont icontubiao-52" class="icon"></q-icon>
          <div class="text">传输失败</div>
        </li>
        <li :class="{'active': tab==='success'}" @click="changeTab('success')">
          <q-icon name="iconfont icontubiao-53" class="icon"></q-icon>
          <div class="text">传输成功</div>
        </li>
      </ul>
      <div class="right full-height">
        <q-markup-table v-show="tab==='doing'" class="file-table">
          <thead>
          <tr>
            <th width="189">文件名</th>
            <th width="85">发送方</th>
            <th width="85">接收方</th>
            <th width="208">接收路径</th>
            <th width="85">累计用时</th>
            <th>传输进程</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(file, index) in doingData" :key="index">
            <td>
              <div class="name doing-name">
                <q-icon name="img:statics/svg/paper-icon.svg" class="icon"></q-icon>
                <div class="txt">
                  <p class="ellipsis">
                    {{file.name}}
                    <q-tooltip self="center middle">{{file.name}}</q-tooltip>
                  </p>
                  <p class="text-gray">{{sizeFormat(file.fileSize*file.progress)}}/{{sizeFormat(file.fileSize)}}</p>
                </div>
              </div>
            <td>{{file.sender==='cloud'?'我的空间':file.sender==='local'?'本地':'设备'}}</td>
            <td>{{file.acceptor==='cloud'?'我的空间':file.acceptor==='local'?'本地':'设备'}}</td>
            <td>
              <span class="ellipsis doing-accept-path">{{file.acceptPath}}</span>
              <q-tooltip self="center middle">{{file.acceptPath}}</q-tooltip>
            </td>
            <td>{{file.useTime}}</td>
            <td><progress-bar :value="file.progress*100"></progress-bar></td>
          </tr>
          </tbody>
        </q-markup-table>
<!--        传输失败列表-->
        <q-markup-table v-show="tab==='fail'" class="file-table">
          <thead>
          <tr>
            <th width="110">文件名</th>
            <th width="75">发送方</th>
            <th width="75">接收方</th>
            <th width="110">接收路径</th>
            <th width="85">累计用时</th>
            <th width="110">传输结束时间</th>
            <th width="150">失败原因</th>
            <th>
              <span>操作</span>
              <q-btn @click="clearRecord('fail')" outline color="primary" class="clear-btn fr">清空</q-btn>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(file, index) in failData" :key="index">
            <td>
              <div class="name fail-name">
                <q-icon name="img:statics/svg/paper-icon.svg" class="icon"></q-icon>
                <div class="txt">
                  <p class="ellipsis">
                    {{file.name}}
                    <q-tooltip self="center middle">{{file.name}}</q-tooltip>
                  </p>
                  <p class="text-gray">{{sizeFormat(file.fileSize)}}</p>
                </div>
              </div>
            <td>{{file.sender==='cloud'?'我的空间':file.sender==='local'?'本地':'设备'}}</td>
            <td>{{file.acceptor==='cloud'?'我的空间':file.acceptor==='local'?'本地':'设备'}}</td>
            <td>
              <span class="ellipsis fail-accept-path">{{file.acceptPath}}</span>
              <q-tooltip self="center middle">{{file.acceptPath}}</q-tooltip>
            </td>
            <td>{{file.useTime}}</td>
            <td>{{file.endTime}}</td>
            <td>
              <span class="text-ellipsis err-reason">{{file.reason}}</span>
              <q-tooltip v-if="file.reason&&file.reason.length > 9" anchor="bottom middle" self="center middle">{{file.reason}}</q-tooltip>
            </td>
            <td>
              <q-btn flat dense round color="primary" icon="iconfont icontubiao-16"
                     @click="delRecord('fail', file)" >
                <q-tooltip>删除</q-tooltip>
              </q-btn>
            </td>
          </tr>
          </tbody>
        </q-markup-table>
<!--        传输成功列表-->
        <q-markup-table v-show="tab==='success'" class="file-table">
          <thead>
          <tr>
            <th width="195">文件名</th>
            <th width="75">发送方</th>
            <th width="75">接收方</th>
            <th width="185">接收路径</th>
            <th width="85">累计用时</th>
            <th width="115">传输结束时间</th>
            <th>
              <span>操作</span>
              <q-btn @click="clearRecord('success')" outline color="primary" class="clear-btn fr">清空</q-btn>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(file, index) in successData" :key="index">
            <td>
              <div class="name success-name">
                <q-icon name="img:statics/svg/paper-icon.svg" class="icon"></q-icon>
                <div class="txt">
                  <p class="ellipsis">
                    {{file.name}}
                    <q-tooltip self="center middle">{{file.name}}</q-tooltip>
                  </p>
                  <p class="text-gray">{{sizeFormat(file.fileSize)}}</p>
                </div>
              </div>
            <td>{{file.sender==='cloud'?'我的空间':file.sender==='local'?'本地':'设备'}}</td>
            <td>{{file.acceptor==='cloud'?'我的空间':file.acceptor==='local'?'本地':'设备'}}</td>
            <td style="width:170px">
              <span class="ellipsis success-accept-path">{{file.acceptPath}}</span>
              <q-tooltip self="center middle">{{file.acceptPath}}</q-tooltip>
            </td>
            <td>{{file.useTime}}</td>
            <td>{{file.endTime}}</td>
            <td>
              <q-btn flat dense round color="primary" icon="iconfont icontubiao-16"
                     @click="delRecord('success', file)" >
                <q-tooltip>删除</q-tooltip>
              </q-btn>
              <q-btn v-if="file.acceptor==='local'" flat dense round color="primary" icon="iconfont icontubiao-55"
                     @click="goPosition(file)" >
                <q-tooltip>当前所在位置</q-tooltip>
              </q-btn>
            </td>
          </tr>
          </tbody>
        </q-markup-table>
      </div>
    </q-card-section>
  </q-card>
</q-dialog>
</template>

<script>
import ProgressBar from 'src/components/progress-bar'
import { goPosition, fileExist } from 'src/assets/js/file-dir'
export default {
  name: 'progress-result-dialog',
  props: {
    doingData: { // 正在传输的数据
      type: Array,
      default () {
        return []
      }
    },
    successData: { // 传输成功的数据
      type: Array,
      default () {
        return []
      }
    },
    failData: { // 传输失败的数据
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      show: false,
      tab: 'doing', // doing or fail or success
      thumbStyle: this.CommonConfig.thumbStyle // 滚动条样式
    }
  },
  methods: {
    showDialog () {
      this.show = true
    },
    hideDialog () {
      this.show = false
    },
    // 切换tab
    changeTab (tab) {
      this.tab = tab
    },
    // 文件大小格式化
    sizeFormat (size) {
      if (size === 0) {
        return '—'
      } else if (size / 1024 < 1) {
        return size + 'B'
      } else if (size / 1024 / 1024 < 1) {
        return (size / 1024).toFixed(2) + 'K'
      } else if (size / 1024 / 1024 / 1024 < 1) {
        return (size / 1024 / 1024).toFixed(2) + 'M'
      } else {
        return (size / 1024 / 1024 / 1024).toFixed(2) + 'G'
      }
    },
    // 删除一条记录, state: 'success' or 'faile'
    delRecord (state, file) {
      this.$emit('delOneRecord', state, file)
    },
    // 清空记录
    clearRecord (state) {
      this.$emit('clearRecord', state)
    },
    // 跳转到文件位置
    goPosition (file) {
      let path = file.acceptPath
      console.log(path)
      // path = path.replace(/\//g, '\\').replace('//', '/')
      if (fileExist(path)) {
        goPosition(path)
      } else {
        this.errMessage('文件不存在')
      }
    },
    // 失败提示
    errMessage (message) {
      this.$q.dialog({
        title: `<p class="dialog-notice-title">
<i class="iconfont icontubiao-52" ></i> 提示</p>`,
        message: message,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        }
      })
    }
  },
  components: {
    ProgressBar
  }
}
</script>

<style scoped lang="stylus">
.dialog-content{
  width 100%
  height 523px
  display flex
  padding 0
  .left{
    flex 150px 0
    width 150px
    background-color #f3f3f3
    border-right 1px solid #d3d3d3
    li{
      padding-top 44px
      padding-bottom 44px
      height 150px
      text-align center
      .icon{
        margin-bottom 10px
        font-size 36px
      }
      .text{
        line-height 1
        font-size 16px
        text-align center
      }
      &.active{
        background-color #CFD6FE
        .icon{
          color $primary
        }
        .text{
          color $primary
        }
      }
    }
  }
  .right{
    flex 1
    background-color #ffffff
    &:hover .file-table::-webkit-scrollbar-thumb{
      background-color rgba(95,119,253,.5)
    }
    .file-table{
      color #333
      height 100%
      &::-webkit-scrollbar{
        width 6px
        height 6px
        background-color #f3f3f3
      }
      &::-webkit-scrollbar-thumb{
        border-radius 6px
        background-color rgba(95,119,253,0)
        transition background-color 500ms ease-in
      }
      &::-webkit-scrollbar-track{
        margin-left -6px
        padding-top 48px
        background-color transparent
        width 0
      }
      thead th{
        padding 0 10px
        background-color #ffffff
        border-right 1px solid #d3d3d3
        border-bottom 1px solid #d3d3d3
        text-align left
        &:last-child{
          border-right none
        }
        .clear-btn{
          width 48px
          height 24px
          min-width 48px
          min-height 24px
          line-height 24px
          font-size 14px
        }
      }
      tr td{
        padding 0 10px
        border-bottom 1px solid #d3d3d3
        font-size 14px
        &:fist-child{
          width 254px
        }
        &:last-child{
          padding-left 2px
          /*text-align center*/
        }
      }
      .name{
        width 194px
        display flex
        align-items center
        .icon{
          font-size 18px
          margin-right: 12px;
        }
        .txt{
          width 164px
          font-size 14px
          p{
            margin-bottom 0
          }
          .text-gray{
            color #999
          }
        }
      }
      .doing-name{
        width 169px
        .txt{
          width: 139px;
        }
      }
      .fail-name{
        width 90px
        .txt{
          width 60px
        }
      }
      .success-name{
        width 175px
        .txt{
          width 145px
        }
      }
    }
  }
  .doing-accept-path{
    display inline-block
    width 188px
    position relative
    top 3px
  }
  .fail-accept-path{
    display inline-block
    width 80px
    position relative
    top 3px
  }
  .success-accept-path{
    display inline-block
    width 165px
    position relative
    top 3px
  }
  .err-reason{
    display inline-block
    width 145px
  }
}
</style>
